var attribute =
  /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
// var dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
var ncname = "[a-zA-Z_][\\-\\.0-9_a-zA-Z" + "]*";
var qnameCapture = "((?:" + ncname + "\\:)?" + ncname + ")";
var startTagOpen = new RegExp("^<" + qnameCapture);
var startTagClose = /^\s*(\/?)>/;
var endTag = new RegExp("^<\\/" + qnameCapture + "[^>]*>");
// var doctype = /^<!DOCTYPE [^>]+>/i;
// #7298: escape - to avoid being passed as HTML comment when inlined in page
// var comment = /^<!\--/;
// var conditionalComment = /^<!\[/;
// const whitespaceRE = /[ \f\t\r\n]+/g
const whitespaceRE = /\s*/g;
// parseHTML(el)

// 4.最终后形成的开始标签 文本标签和结束标签拿到了数据后 再次进行重组 形成新的数据

export function parseHTML(html) {
  /**
   * 创建语法树
   * @param {*} tag
   * @param {*} attrs
   * @return {object}
   */

  function createASTElement(tag, attrs) {
    return {
      type: 1,
      tag,
      attrs, // 属性
      // attrsList: attrs,
      // attrsMap: makeAttrsMap(attrs),
      // rawAttrsMap: {},
      parent: null,
      children: [], // 子节点
    };
  }
  let root;
  let currentParent;
  let inVPre = false;
  let inPre = false;
  let warned = false;
  let stack = [];
  // 1.开始标签
  function start(tag, attrs) {
    let element = createASTElement(tag, attrs);
    // 如果没有跟元素
    if (!root) {
      root = element;
    }
    currentParent = element;
    stack.push(element);
  }
  // 2.文本标签
  function charts(text) {
    text = text.replace(whitespaceRE, "");
    if (text) {
      const children = currentParent.children;
      children.push({
        type: 3,
        text,
      });
    }
  }
  // 3.结束标签
  function end(tag) {
    const element = stack.pop();
    // pop stack
    // stack.length -= 1
    currentParent = stack[stack.length - 1];
    if (currentParent) {
      element.parent = currentParent.tag;
      currentParent.children.push(element);
    }
  }
  while (html) {
    // 开始标签 - 文本 - 结束标签
    // last = html;
    var textEnd = html.indexOf("<");

    if (textEnd === 0) {
      var startTagMatch = parseStartTag();
      if (startTagMatch) {
        start(startTagMatch.tagName, startTagMatch.attrs);
        continue;
      }

      // 结束标签
      let endTagMatch = html.match(endTag);
      if (endTagMatch) {
        advance(endTagMatch[0].length);
        end(endTagMatch[1]);
        continue;
      }
    }

    var text = void 0,
      rest = void 0,
      next = void 0;
    // 文本 textEnd >= 0
    if (textEnd >= 0) {
      rest = html.slice(textEnd);
      text = html.substring(0, textEnd);
      if (text) {
        advance(text.length);
        charts(text);
        continue;
      }
    }
    break;
  }

  function parseStartTag() {
    let start = html.match(startTagOpen);
    if (start) {
      // 创建一个语法树
      var match = {
        tagName: start[1],
        attrs: [],
        // start: index,
      };
      advance(start[0].length);
      // 删除属性 属性有多个
      let end, attr;
      // 匹配到结尾标签 不是结尾标签继续循环         匹配属性
      while (
        !(end = html.match(startTagClose)) &&
        (attr = html.match(attribute))
      ) {
        match.attrs.push({
          name: attr[1],
          value: attr[3] || attr[4] || attr[5],
        });
        advance(attr[0].length);
      }
      if (end) {
        advance(end[0].length);
        return match;
      }
    }
  }
  // 删除
  function advance(n) {
    // index += n;
    html = html.substring(n);
    // <div id="app">hello</div>
    // ||
    // id="app">hello</div>
  }
  return root;
}
